/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-07-25 11:11:30
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-10-12 16:59:51
 * @File Name: filter.js
 */

'use strict';

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    RecyclerViewBackedScrollView,
    ListView,
    TouchableOpacity,
    Switch,
    Picker,
    ScrollView,
} from 'react-native';


let { width, height } = Utils.size;
import Icon from 'react-native-vector-icons/Ionicons';
import PickerModal from '../common/pickerModal';
import Location from './location';
import Select from '../common/select';
import MultipleSelect from '../common/multipleSelect';
import Browse from './browse';

export default class Filter extends Component {
    constructor(props) {
        super(props);
        this.state = _.clone(Store.lastSearchOptions);
        this.init();
        SceneObj.Filter = this;
    }

    init() {
        this._genderData = JSON.parse(Store.local_gender);
        this._genderData.push({ value: '', label: Lang.filter_noPre});
        this.setGenderData();
        this._disabilityData = JSON.parse(Store.local_disability);
        this._smokerData = JSON.parse(Store.local_smoker);        
        this._smokerData.pop();
        this._smokerData.unshift({ value: '', label: Lang.filter_noPre});
        this._ethnicityData = JSON.parse(Store.local_ethnicity);
        this._ethnicityData.pop();
        this._locationText = Lang.filter_anywhere;
        Share.getCountryList({ callback:()=> function(){} });
        if ( parseInt(this.state.is_distance) === 1 ) {
            this.showLoactionText(false);
        } else if ((typeof (this.state.r_country)  != 'undefined') && (this.state.r_country !== '')) {
            Share.getStateList({country: this.state.r_country, callback: ()=> this.showLoactionText()});
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>Basics</Text>
                <View style={styles.box}>
                    <TouchableOpacity onPress={() => this.setState({genderModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={styles.left}>Seeking</Text>
                            <Text suppressHighlighting={true} style={styles.right}>{ Utils.replaceGender(Share.getLabel('local_gender', this.state.match_gender, Lang.filter_noPre)) }</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ageModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={styles.left}>Age</Text>
                            <Text suppressHighlighting={true} style={styles.right}>{this.state.match_age_min || 18} - {this.state.match_age_max || 99}</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({locationModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={styles.left}>Location</Text>
                            <Text numberOfLines={1} suppressHighlighting={true} style={[styles.right, styles.rightMaxWidth]}>{ this._locationText || Lang.filter_anywhere }</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <Text style={styles.text}>For Gold Member</Text>
                <View style={styles.box}>
                    <View style={styles.line}>
                        <Text style={styles.left}>Photo only</Text>
                        <Switch style={styles.rightSwitch} onValueChange={(value) => this.setState({search_photo: value ? 1: 0 })} value={ parseInt(this.state.search_photo) === 1 ? true: false } />
                    </View>
                    <TouchableOpacity onPress={() => this.setState({disabilityModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={styles.left}>Living With</Text>
                            <Text numberOfLines={1} suppressHighlighting={true} style={[styles.right, {width: width - 100}]}> { Share.showCheckboxLabel('local_disability', this.state.match_disability, ', ', Lang.filter_noPre) } </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({ethnicityModalVisble: true})}>
                        <View style={styles.line}><
                            Text style={styles.left}>Ethnicity</Text>
                            <Text numberOfLines={1} suppressHighlighting={true} style={[styles.right, styles.rightMaxWidth]}>{ Share.showCheckboxLabel('local_ethnicity', this.state.match_ethnicity, ', ', Lang.filter_noPre) }</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.setState({smokerModalVisble: true})}>
                        <View style={styles.line}>
                            <Text style={styles.left}>Smoking</Text>
                            <Text suppressHighlighting={true} style={styles.right}>{ Share.getLabel('local_smoker', this.state.match_smoker, Lang.filter_noPre) }</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                {this.genderModal()}
                {this.disabilityModal()}
                {this.ethnicityModal()}
                {this.smokerModal()}
                {this.ageModal()}
                {this.locationModal()}
            </View>
        )
    }

    rightButton() {
        Store.lastSearchOptions = _.clone(this.state);
        Share.tmpLocationOptions = {};
        Utils.navReplaceTo(this.props.navigator, {
            name: "Search",
            component: Browse,
            title: 'Browse',
            navBarType: 1,
            RightButton: 'filter',
        });
    }

    showLoactionText(forceUpdate = true) {
        if ( parseInt(this.state.is_distance) === 1 ) {
            this._locationText = Share.getLabel('local_distance', this.state.distance);
        } else if ((typeof (this.state.r_country)  != 'undefined') && (this.state.r_country !== '')) {
            this._locationText = Share.getStateLabel(this.state.r_country, this.state.match_r_state_id) + ', ' + Share.getLabel('local_country', this.state.r_country);
        } else {
            this._locationText = Lang.filter_anywhere;
        }
        if (forceUpdate) {
            this.forceUpdate();
        }      
    }

    setGenderData() {
        for( let i in this._genderData) {
            this._genderData[i].label = Utils.replaceGender(this._genderData[i].label)
        }
    }

    genderModal() {
        return (this.state.genderModalVisble ? <Select title={'Seeking'} data={this._genderData} value={this.state.match_gender} callbackCancel={ () => this.setState({genderModalVisble: false}) } callbackSave={ (value) => this.setState({match_gender: value, genderModalVisble: false}) } /> : null);
    }

    ageModal() {
        let jsx = null, items = this.getAgeItems();
        if( this.state.ageModalVisble ) {
            jsx = <PickerModal
                    navTitle='Age'
                    modalVisible={this.state.ageModalVisble}
                    onPickerModalCancel = {() => this.setState({ageModalVisble: false}) }
                    onPickerModalSave = {() => this.setState({ageModalVisble: false})}
                    >
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center',}}>
                    <Picker style={{width: 100}}
                      selectedValue={ ((typeof(this.state.match_age_min) !== 'undefined' && !(_.isString(this.state.match_age_min))) ? this.state.match_age_min.toString() : this.state.match_age_min) || '18' }
                      onValueChange={(age) => { this.setState({match_age_min: parseInt(age), match_age_max: Math.max(parseInt(age), this.state.match_age_max)})}}>
                      {items}
                    </Picker>
                    <Picker style={{width: 100}}
                      selectedValue={ ((typeof(this.state.match_age_max) !== 'undefined' && !(_.isString(this.state.match_age_max))) ? this.state.match_age_max.toString() : this.state.match_age_max) || '99' }
                      onValueChange={(age) => this.setState({match_age_min: Math.min(parseInt(age), this.state.match_age_min), match_age_max: parseInt(age)})}>
                      {items}
                    </Picker>
                    </View>
                 </PickerModal>  
        }
        return (jsx)
    }

    getAgeItems() {
        let items = [];
        for (let i = 18; i < 100; i++) {
            items.push(<Picker.Item label={i.toString()} value={i.toString()} key={i.toString()} />)
        }
        return items;
    }

    locationModal() {
        return (this.state.locationModalVisble ? (<Location {...this.state} callbackCancel={ () => this.setState({locationModalVisble: false}) } callbackSave={ (data) => this.callbackSaveLocation(data) } />) : null);
    }

    callbackSaveLocation(data) {
        if ( data.is_distance === 1 ) {
            this.setState({is_distance: 1, distance: data.distance, r_country: '', match_r_state_id: '', locationModalVisble: false});
        } else if ( data.is_distance === 0 ) {
            this.setState({is_distance: 0, distance: '', r_country: data.r_country, match_r_state_id: data.match_r_state_id, locationModalVisble: false});
        } else {
            this.setState({is_distance: '', distance: '', r_country: '', match_r_state_id: '', locationModalVisble: false});
        }
        let tthis = this;
        setTimeout(function() {
            tthis.showLoactionText();
        }, 10)
    }

    disabilityModal(){
        return (this.state.disabilityModalVisble ? <MultipleSelect title={'Living With'} data={this._disabilityData} value={this.state.match_disability} callbackCancel={ () => this.setState({disabilityModalVisble: false}) } callbackSave={ (value) => this.setState({match_disability: Utils.getMultipleData(value), disabilityModalVisble: false}) } /> : null);
    }

    ethnicityModal(){
        return (this.state.ethnicityModalVisble ? <MultipleSelect title={'Ethnicity'} data={this._ethnicityData} value={this.state.match_ethnicity} callbackCancel={ () => this.setState({ethnicityModalVisble: false}) } callbackSave={ (value) => this.setState({match_ethnicity: Utils.getMultipleData(value), ethnicityModalVisble: false}) } /> : null);
    }

    smokerModal() {
        return (this.state.smokerModalVisble ? <Select title={'Smoking'} data={this._smokerData} value={this.state.match_smoker} callbackCancel={ () => this.setState({smokerModalVisble: false}) } callbackSave={ (value) => this.setState({match_smoker: value, smokerModalVisble: false}) } /> : null);
    }
}

const styles = StyleSheet.create(Css.FilterStyle)